<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import UploadForm from '@/components/upload-form/index.vue'
import {
  editPictureUsingPost,
  listPictureTagCategoryUsingGet, uploadPictureByUrlUsingPost
} from '@/servers/api/pictureController.ts'
import { message } from 'ant-design-vue'

defineOptions({
  name: 'AddPicture'
})

enum UPLOAD_TYPE_ENUM {
  FILE = '文件上传',
  URL = 'URL地址'
}

// 当前步骤
const current = ref<number>(0)

// 步骤数组
const steps = [
  {
    title: '上传图片',
    content: 'upload'
  },
  {
    title: '图片信息',
    content: 'info'
  },
  {
    title: '上传成功',
    content: 'success'
  }
]
const items = steps.map(item => ({ key: item.title, title: item.title }))

// 上传选项数组
const uploadTypeList = reactive([UPLOAD_TYPE_ENUM.FILE, UPLOAD_TYPE_ENUM.URL])
// 上传方式
const uploadType = ref(UPLOAD_TYPE_ENUM.FILE)
// 图片数据
const picture = ref<API.PictureVO>()
// 图片表单
const pictureForm = reactive<API.PictureEditRequest>({
  fileUrl: ''
})

// 上传成功回调
const uploadSuccess = async (data: API.PictureVO) => {
  console.log('图片上传成功', data)
  picture.value = data
  pictureForm.id = data.id
}

// 确认按钮点击事件
const handleSubmit = async () => {
  console.log('图片表单', pictureForm)
  const res = await editPictureUsingPost(pictureForm)
  if (res.code == 200) {
    // 跳转下一步
    nextStep()
  }
}

const categoryOptions = ref<string[]>([])
const tagOptions = ref<string[]>([])

// 获取标签和分类选项
const getTagCategoryOptions = async () => {
  const res = await listPictureTagCategoryUsingGet()
  if (res.code == 200 && res.data) {
    // 转换成下拉选项组件接受的格式
    tagOptions.value = (res.data.tagList ?? []).map((data: string) => {
      return {
        value: data,
        label: data
      }
    })
    categoryOptions.value = (res.data.categoryList ?? []).map((data: string) => {
      return {
        value: data,
        label: data
      }
    })
  }
}

// 下一步
const nextStep = () => {
  current.value++
}

// 重置
const reset = () => {
  current.value = 0
}

/** URL上传 */
const onUpload = async () => {
  if (!pictureForm.fileUrl) {
    message.warning("请输入正确的URL地址")
    return;
  }
  const res = await uploadPictureByUrlUsingPost(pictureForm);
  if (res.code == 200) {
    picture.value = res.data
    pictureForm.id = res.data.id
    // 跳转下一步
    nextStep()
  }
}

onMounted(async () => {
  await getTagCategoryOptions()
})
</script>

<template>
  <div class="container">
    <a-steps :current="current" :items="items"></a-steps>
    <div class="steps-content">
      <div v-if="current === 0" style="margin: 20px 0">
        <a-space>
          <span>上传方式</span>
          <a-segmented v-model:value="uploadType" :options="uploadTypeList" />
        </a-space>
        <template v-if="uploadType === UPLOAD_TYPE_ENUM.FILE">
          <UploadForm :on-success="uploadSuccess" />
        </template>
        <div v-else>
          <a-form
            :model="pictureForm"
            name="basic"
            autocomplete="off"
            style="margin: 20px 0"
            @finish="onUpload"
          >
            <a-form-item
              label="URL地址"
              name="fileUrl"
              :rules="[{ required: true, message: '请输入URL地址' }]"
            >
              <a-input v-model:value="pictureForm.fileUrl" />
            </a-form-item>
            <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
              <a-button type="primary" html-type="submit">确认</a-button>
            </a-form-item>
          </a-form>
        </div>
<!--        <a-button type="primary" @click="nextStep">下一步</a-button>-->
      </div>
      <div v-else-if="current === 1">
        <div class="form-container">
          <a-form :model="pictureForm" @finish="handleSubmit">
            <a-form-item label="名称" name="name">
              <a-input v-model:value="pictureForm.name" placeholder="请输入名称" />
            </a-form-item>
            <a-form-item label="分类" name="category">
              <a-auto-complete
                v-model:value="pictureForm.category"
                :options="categoryOptions"
                placeholder="请输入分类"
                allowClear
              />
            </a-form-item>
            <a-form-item label="标签" name="tags">
              <a-select
                v-model:value="pictureForm.tags"
                :options="tagOptions"
                mode="tags"
                placeholder="请输入标签"
                allowClear
              />
            </a-form-item>
            <a-form-item label="简介" name="introduction">
              <a-textarea
                v-model:value="pictureForm.introduction"
                placeholder="请输入简介"
                :auto-size="{ minRows: 2, maxRows: 5 }"
                allowClear
              />
            </a-form-item>
            <a-form-item>
              <a-button type="primary" html-type="submit" style="width: 120px">创建</a-button>
            </a-form-item>
          </a-form>
        </div>
      </div>
      <div v-else>
        上传成功
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.container {
  max-width: 800px;
  min-width: 650px;
  margin: 0 auto;
}

.steps-content > div {
  margin: 20px auto;
}

//.form-container {
//  margin: 20px auto;
//}
</style>
